<template>
  <div style="width: 100%;">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="关键词">
              <a-input placeholder="请输入类型编码、类型名称或描述" v-model="queryParam.searchWord"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12">
            <a-form-item label="分类">
              <c-select d-type="sys_dict_type" v-model="queryParam.dictType"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12">
            <a-form-item label="状态">
              <c-select d-type="sys_use_flag" v-model="queryParam.useFlag" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="">
              <a-button @click="search" type="primary">查询</a-button>
              <a-button @click="reset" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-page-operator-wrapper">
      <a-button type="primary" @click="$refs.addPanel.show()" ghost>新增</a-button>
      <a-popconfirm
        title="确定删除选中记录?"
        ok-text="确定"
        cancel-text="取消"
        @confirm="batchDelete(selectedRowKeys)"
      >
        <a-button :disabled="selectedRowKeys.length === 0">删除</a-button>
      </a-popconfirm>
      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item key="export-data" @click="exprotExcel">导出Excel</a-menu-item>
        </a-menu>
        <a-button>
          更多操作 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
      :pageSize="5"
      rowKey="code"
      :show-size-changer="false"
      :row-selection="rowSelection">
      <span slot="dictType" slot-scope="text">{{ text | getLabel('sys_dict_type') }}</span>
      <span slot="useFlag" slot-scope="text">{{ text | getLabel('sys_use_flag') }}</span>
      <span slot="action" slot-scope="text, record">
        <a @click="$refs.addPanel.show(record)">编辑</a>
        <a-divider type="vertical"/>
        <a-dropdown>
          <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">详情</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm
                placement="leftTop"
                :title="`确定删除「${record.name}」?`"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteRecord(record)"
              >
              <a href="javascript:;">删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>
    <dict-edit-panel ref="addPanel" @submit-success="handleSubmitSuccess"/>
  </div>
</template>

<script>
import { STable } from '@/components'
import DictEditPanel from './DictEditPanel'
import CSelect from '@/views/common/Select'
// 字典类型 panel
export default {
  name: 'DictPanel',
  components: { STable, DictEditPanel, CSelect },
  data () {
    // { title: '子项数据类型', dataIndex: 'itemDataType', width: 120, ellipsis: true }
    return {
      testType: 'sys_dict_type',
      queryParam: {},
      columns: [{
        title: '类型编码',
        dataIndex: 'code',
        width: 140,
        ellipsis: true
      }, {
        title: '类型名称',
        dataIndex: 'name',
        width: 140,
        ellipsis: true
      }, {
        title: '字典分类',
        dataIndex: 'dictType',
        width: 100,
        ellipsis: true,
        align: 'center',
        scopedSlots: { customRender: 'dictType' }
      }, {
        title: '可用状态',
        dataIndex: 'useFlag',
        width: 100,
        align: 'center',
        scopedSlots: { customRender: 'useFlag' }
      }, {
        title: '描述',
        dataIndex: 'description',
        ellipsis: true
      }, {
        title: '操作',
        dataIndex: 'action',
        width: 150,
        align: 'center',
        scopedSlots: { customRender: 'action' }
      }],
      loadData: parameter => {
        this.selectedRowKeys = []
        this.$emit('select-row-change', [], [])
        return this.$http.get('/dict/type', {
          params: Object.assign(parameter, this.queryParam)
        }).then(res => {
          return {
            data: res.page.records,
            pageSize: res.page.limit,
            pageNo: res.page.pageNo,
            totalCount: res.page.total
          }
        })
      },
      selectedRowKeys: [],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.$emit('select-row-change', selectedRowKeys, selectedRows)
        }
      }
    }
  },
  methods: {
    search () {
      this.$refs.table.refresh(true)
    },
    reset () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    handleSubmitSuccess () {
      this.$refs.table.refresh()
    },
    deleteRecord (record) {
      this.fetchDelete([record.code])
    },
    batchDelete (ids) {
      if (this.deleteLoading) {
        return
      }
      this.deleteLoading = true
      this.fetchDelete(ids, sucess => {
        this.deleteLoading = false
      })
    },
    fetchDelete (ids, callback) {
      this.$http.delete('dict/type/' + ids.join(',')).then(res => {
        if (res.data) {
          this.$message.success('删除成功')
          this.$refs.table.refresh()
        } else {
          this.$message.error('删除失败')
        }
        if (callback) {
          callback.call(this, true)
        }
      }).catch(e => {
        if (callback) {
          callback.call(this, true)
        }
      })
    },
    exprotExcel () {}
  }
}
</script>

<style scoped>

</style>
